<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<%@ page session="false"%>
<%@ page contentType="text/html; charset=UTF-8"%>

<div id="zhishilist"></div>

<div id="pagelist">
	<a href="javascript:void(0);" title="上一页">上一页</a>
	<a href="javascript:void(0);" title="下一页">下一页</a>
</div>

<script language="JavaScript" type="text/javascript">
	//<![CDATA[
	$(function(){
		try{
			var curPage=0;//基于1,0表示还没有加载任何数据的初始状态
			var pageTotal=99999;
			
			/**加载指定页面，会报错，无返回值，异步执行，不报错不代表一定成功。如果成功，会修改curPage值**/
			function loadPage(page){
				try{
					if(page<1 || curPage==page){
						return;
					}

					var zhishilistObj=$("#zhishilist");
					var panelIdx=zhishilistObj.data(""+page);
					if(panelIdx===undefined){//无缓存
						//先加载成缓存，然后重新调用一下本函数，使用新加载的缓存
						$.getJSON("zhishi/list",{pageNo:page,pageSize:10},function(json){
							try{
								if(json.state!='ok'){
									alert(json.message);
									return;
								}
								var data=json.data;
								var panel=new Array();
								panel.push('<div>');
								for(var i=0;i<data.length;i++){
									//下面的这段过程应该可以独立出来作为一个组件
									//对于json方面的拼接字符串的操作，应该可以更简洁点
									var zhishi=data[i];
									var node=new Array();
									node.push('<div class="node">');
									node.push('<div class="head">'+zhishi.title+'<\/div>');								
									node.push('<div class="body">'+zhishi.content+'<\/div>');
									node.push('<div class="foot">');
									var time=new Date();
									time.setTime(zhishi.indb);
									node.push('<span class="time">'+time.toLocaleString()+'<\/span>');
									if(zhishi.tags.length>0){
										node.push('<span class="tags">标签:'+zhishi.tags+'<\/span>');
									}
									node.push('<\/div>');
									node.push('<\/div>');
									var nodeHtml=node.join("");
									panel.push(nodeHtml);
								}
								panel.push('<\/div>');
								panelHtml=panel.join("\n");
								panelObj=$(panelHtml);
								panelObj.hide();
								var panelObjIdx=zhishilistObj.children().size();
								zhishilistObj.append(panelObj);
								zhishilistObj.data(""+page,panelObjIdx);//放入缓存

								//如果在页面遍历时，增加了新的页面，这里还是可能会有问题
								//TODO
								if(pageTotal>json.pageTotal){									
									pageTotal=json.pageTotal;
								}
								
								//再次调用
								loadPage(page)
							}catch(e){alert(e);}
						});
						return
					}
					//有缓存
					var pagePanels=zhishilistObj.children();
					assert(panelIdx<=pagePanels.length,"");
					$(pagePanels[panelIdx]).show();
					if(curPage>0){
						var curPanelIdx=zhishilistObj.data(""+curPage);
						assert(curPanelIdx!==undefined,"");							
						$(pagePanels[curPanelIdx]).hide();
					}
					curPage=page;
					
					if(curPage<=1){
						$("#pagelist a:first").hide();
					}else{
						$("#pagelist a:first").show();
					}
					if(curPage>=pageTotal){
						$("#pagelist a:last").hide();				
					}else{
						$("#pagelist a:last").show();
					}
				}catch(e){alert(e);}	
			}
						
			$("#pagelist a").button();
			//前一页
			$("#pagelist a:first").click(function(event){
					if(curPage>1){
						var page=curPage-1;
						loadPage(page);
					}
					return false;
				});
			//后一页
			$("#pagelist a:last").click(function(event){
					var page=curPage+1;
					loadPage(page);
					return false;
				});
			
			loadPage(1);
		}catch(e){alert(e);}
	});
	//]]>
</script>